<template>
  <div class="leftSide h_p100 fl">
    <div class="bgFloor flex-between" :style="{height: bgFloorHeight}">
      <div class="left h_p100"></div>
      <div class="right h_p100"></div>
    </div>
    <ul class="navList w_p100">
      <li class="firstNav" :class="selectedIndex === 0 ? 'prelist' : ''"></li>
      <li
        class="firstNav"
        :class="[selectedNav === item.name ? 'high' : '']"
        v-for="(item, index) in navList"
        :key="item.name"
        @click="changePath(item.path, item.name, index, item.meta, item.children ? item.children.length : 0)"
      >
        <div
          class="navSec flex-start cp"
          :class="[
            index - 1 === selectedIndex  ? 'nextlist' : '',
            index + 1 === selectedIndex  ? 'prelist' : '',
            item.meta && nextFather === item.meta.fatherNav ? 'nextlist' : '',
            item.meta && preFather === item.meta.fatherNav && index === currentFarIndex ? 'prelist' : ''
          ]"
        >
          <img
            class="navIcon"
            :src="
              require('@/assets/leftNav/' +
                (selectedNav === item.name ? item.name + '_high' : item.name) +
                '.png')
            "
            alt=""
          />
          <span class="navName">{{ switchNav(item.name) }}</span>
          <img
            class="morenav"
            v-if="item.meta && item.meta.fatherNav"
            :src="
              require('@/assets/leftNav/' +
                (fatherNavList.indexOf(item.meta.fatherNav) > -1
                  ? 'openNav'
                  : 'closeNav') +
                '.png')
            "
            alt=""
          />
        </div>
        <ul
          class="secondList"
          v-if="
            item.meta &&
              item.meta.fatherNav &&
              fatherNavList.indexOf(item.meta.fatherNav) > -1
          "
        >
          <li
            class="flex-start cp"
            :class="[
              secondNav === it.name ? 'high' : '',
              ind - 1 === secondNavIndex &&  index === currentFarIndex ? 'nextlist' : '',
              ind + 1 === secondNavIndex &&  index === currentFarIndex ? 'prelist' : ''
            ]"
            v-for="(it, ind) in item.children"
            :key="ind"
            @click.stop="
              selectSecPath(
                it.path,
                it.name,
                ind,
                item.children.length - 1,
                index
              )
            "
          >
            {{ switchSecNav(it.name) }}
          </li>
        </ul>
      </li>
      <li class="fixbottom" :class="fixBottom ? 'nextlist' : ''"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedNav: '',
      selectedIndex: '',
      fatherNavList: [], // 二级导航显隐用
      secondNav: '',
      secondNavIndex: '',
      secondNavNum: 0, // 展开的二级导航数量  用于底层色板的高度
      preFather: '',
      nextFather: '',
      fixBottom: false,
      currentFarIndex: '',
      secondNavList: []
    }
  },
  computed: {
    navList () {
      // 路由表的首页侧边导航
      return this.$router.options.routes.filter(item => item.name === 'home')[0]
        .children
    },
    bgFloorHeight () {
      return 4.86 + 0.6 * this.secondNavNum + 'rem'
    }
  },
  mounted () {
    this.refreshNav()
  },
  methods: {
    // 筛选导航名
    switchNav (name) {
      let navName = ''
      switch (name) {
        case 'dataPlatform':
          navName = '数据看板'
          break
        case 'userManage':
          navName = '用户管理'
          break
        case 'cfManage':
          navName = '会议管理'
          break
        case 'fileManage':
          navName = '文件管理'
          break
        case 'feedback':
          navName = '意见反馈'
          break
        case 'serviceManage':
          navName = '服务管理'
          break
        case 'systemManage':
          navName = '系统管理'
          break
      }
      return navName
    },
    // 二级导航筛选
    switchSecNav (name) {
      let secName = ''
      switch (name) {
        case 'serviceSetting':
          secName = '服务器设置'
          break
        case 'servUserSession':
          secName = '用户协议'
          break
        case 'servPrivSession':
          secName = '隐私协议'
          break
        case 'servAppList':
          secName = '应用上架'
          break
        case 'sysUserManage':
          secName = '系统用户管理'
          break
        case 'sysManagerLog':
          secName = '管理员日志'
          break
        case 'sysLevelManage':
          secName = '职位管理'
          break
      }
      return secName
    },
    // 刷新保持导航状态
    refreshNav () {
      const fartherMatchIndex = this.$route.matched.length === 4 ? this.$route.matched.length - 3 : this.$route.matched.length - 2 // 父路由的matched下标
      if (this.$route.matched[fartherMatchIndex]) {
        const firstNavIndex = this.navList.findIndex(
          item => item.path === this.$route.matched[fartherMatchIndex].path
        )
        if (this.$route.matched[fartherMatchIndex].meta.fatherNav) {
          this.fatherNavList = this.fatherNavList.concat(
            this.$route.matched[fartherMatchIndex].meta.fatherNav
          )
          const maxIndex = this.navList[firstNavIndex].children.length - 1
          let secIndex = ''
          let path = ''
          let pathName = ''
          if (this.$route.matched.length === 4) {
            // // console.log(this.navList[firstNavIndex].children.findIndex(item => item.path === this.$route.matched[this.$route.matched.length - 2].path))
            secIndex = this.navList[firstNavIndex].children.findIndex(item => item.path === this.$route.matched[this.$route.matched.length - 2].path)
            path = this.$route.matched[this.$route.matched.length - 2].path
            pathName = this.$route.matched[this.$route.matched.length - 2].name
          } else {
            secIndex = this.navList[firstNavIndex].children.findIndex(item => item.path === this.$route.matched[this.$route.matched.length - 1].path)
            path = this.$route.path
            pathName = this.$route.name
          }
          this.secondNavNum = this.navList[firstNavIndex].children.length
          this.selectSecPath(path, pathName, secIndex, maxIndex, firstNavIndex)
        } else {
          this.changePath(
            this.$route.matched[1].path,
            this.$route.matched[1].name,
            firstNavIndex
          )
        }
      }
    },
    // 一级导航切换
    changePath (path, name, index, meta, chlidLength) {
      if (meta && meta.fatherNav) {
        if (this.fatherNavList.some(item => item === meta.fatherNav)) { // 已存在当前一级导航 再次点击则关闭
          if (this.secondNavIndex === 0 && this.currentFarIndex === index) { // 高亮在第一个二级导航
            this.preFather = ''
          }
          if (this.secondNavIndex === chlidLength - 1 && this.currentFarIndex === index) { // 当前最后一个二级导航高亮
            this.nextFather = ''
            this.fixBottom = false
          }
          this.secondNavNum -= chlidLength
          this.fatherNavList = this.fatherNavList.filter(
            item => item !== meta.fatherNav
          )
        } else { // 当前一级导航为展开状态
          if (this.secondNavIndex === 0 && this.currentFarIndex === index) {
            this.preFather = this.navList[this.currentFarIndex].meta.fatherNav
          }
          if (this.currentFarIndex === index && this.secondNavIndex === chlidLength - 1 && this.currentFarIndex + 1 < this.navList.length) {
            this.nextFather = this.navList[this.currentFarIndex + 1].meta.fatherNav
          }
          this.secondNavNum += chlidLength
          this.fatherNavList = this.fatherNavList.concat(meta.fatherNav)
        }
        return
      }
      this.preFather = ''
      this.nextFather = ''
      this.secondNavIndex = ''
      this.secondNav = ''
      this.selectedIndex = index
      if (this.selectedIndex + 1 === this.navList.length && !meta.fatherNav) {
        this.fixBottom = true
      } else {
        this.fixBottom = false
      }
      this.selectedNav = name
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    },
    // 二级导航切换
    selectSecPath (path, name, index, maxIndex, fatherIndex) {
      // // console.log(path, name, index, maxIndex, fatherIndex)
      if (fatherIndex === this.navList.length - 1 && index === maxIndex) {
        this.fixBottom = true
      } else {
        this.fixBottom = false
      }
      this.secondNavIndex = index
      this.currentFarIndex = fatherIndex
      if (index === 0) {
        this.nextFather = ''
        this.preFather = this.navList[fatherIndex].meta.fatherNav
      } else if (
        index === maxIndex &&
        fatherIndex + 1 < this.navList.length &&
        this.navList[fatherIndex + 1].meta
      ) {
        this.preFather = ''
        this.nextFather = this.navList[fatherIndex + 1].meta.fatherNav
      } else {
        this.preFather = ''
        this.nextFather = ''
      }
      this.selectedNav = ''
      this.selectedIndex = ''
      this.secondNav = name
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.leftSide {
  width: 240px;
  background-color: #304eec;
  position: relative;
  overflow: auto;
  .bgFloor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: pink;
    .left {
      width: 50%;
      background-color: #304eec;
    }
    .right {
      width: 50%;
      background-color: #f2f4f8;
    }
  }
  ul.navList {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    li.firstNav {
      div.navSec {
        background-color: #304eec;
        padding-left: 46px;
        height: 60px;
        img.navIcon {
          width: 22px;
          height: 22px;
        }
        span.navName {
          margin-left: 11px;
          height: 16px;
          font-size: 16px;
          font-weight: 500;
          line-height: 16px;
          color: #ffffff;
        }
        img.morenav {
          margin-left: 60px;
          transform: scale(0.4);
        }
      }
      &:first-child,
      &:last-child {
        background-color: #304eec;
        height: 50px;
      }
      ul.secondList {
        li {
          background-color: #304eec;
          padding-left: 76px;
          height: 60px;
          font-size: 16px;
          font-weight: 500;
          color: #ffffff;
        }
        li.high {
          background-color: #f2f4f8;
          color: #304eec;
          border-radius: 8px 0 0 8px;
        }
      }
    }

    li.firstNav.high div.navSec {
      background-color: #f2f4f8;
      border-radius: 8px 0 0 8px;
      span.navName {
        color: #304eec;
      }
    }
    li.prelist,
    div.prelist {
      border-radius: 0 0 8px 0;
    }
    li.nextlist,
    div.nextlist {
      border-radius: 0 8px 0 0;
    }
    li.fixbottom{
      height: 16px;
      background-color: #304eec;
    }
  }
}
</style>
